<template>
  <div id="samstoSpecboxList" v-for=" (item, index) in storageList" :key="item.id" style="display: flex;flex-wrap: wrap;gap: 10px;padding: 10px; width: calc(25% - 10px);">
        <div class='area'>
            <div class="tableBox margin-bottom">
              <el-container>
                <el-header id='boxHeader'>
                  <div class="padding-lr-sm margin-top-sm"><span class="text-bold text-shadow">{{item.itemName}}({{item.itemCode}})</span></div>
                  <div class="padding-lr-sm"><span class="text">已使用:{{item.useNum}}</span>/<span>空余:{{item.notUseNum}}</span></div>
                  <div class="padding-lr-sm"><span class="text">冷藏:{{item.frigTemp}}℃</span><span class="margin-left-xs">冷冻:{{item.freezeTemp}}℃</span><!--<span class="margin-left-xs">开机时长:588小时</span>--></div>
                  <div class="padding-lr-sm margin-top"><span class="text text-red text-bold">{{IsEmpty(item.timeoutBoxNum)?0:item.timeoutBoxNum}}组样本盒{{IsEmpty(item.timeoutOrderNum)?0:item.timeoutOrderNum}}个标本[1]天后到期,待销毁</span></div>
                </el-header>

                  <div v-for="layer in item.fridgeLayerList" :key="layer.id">
                    <el-main class='boxmain'>
                    <el-container>
                      <el-aside width="40px">第{{layer.layerSeq}}层</el-aside>
                      <el-main>
                        <el-row style="height: 60px;">
                          <div v-for="(specbox,specboxIndex) in layer.specboxList" :key="specbox.id">
                            <el-col :span="8" @click="opensamsspecboxmodel(item,layer,specbox,specboxIndex)">
                              <el-button type="" :class="currentIndex === `${specbox.id}-${specboxIndex}` ? 'actived':''">{{specbox.specboxCode}}</el-button>
                            </el-col>
                          </div>
                        </el-row>
                      </el-main>
                    </el-container>
                    </el-main>
                  </div>

                <el-footer id='boxFooter'>
                  <div class="power-indicator"></div>
                  <div class="margin-left-xs">开机</div>
                </el-footer>
              </el-container>
            </div>
          <div class="box-bottom flex justify-between">
            <div style="width:25px;height:8px;background-color:#e0e0e0;margin-right:30px;margin-left:30px;border-bottom-left-radius:5px;border-bottom-right-radius:5px"></div>
            <div style="width:25px;height:8px;background-color:#e0e0e0;margin-right:30px;margin-left:30px;border-bottom-left-radius:5px;border-bottom-right-radius:5px"></div>
          </div>
        </div>
  </div>
  <SamstoSpecBoxComp ref="SamstoSpecBoxCompRef" />
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { reactive, ref, getCurrentInstance, onMounted, watch, PropType } from 'vue';
import { VxeColumnPropTypes, VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import type { VxeTableInstance } from 'vxe-table';
import { AppStore } from '@/stores/store';
import SamstoSpecboxForm from "../form/SamstoSpecboxForm.vue";
import { IsEmpty, getAssetsFile } from '@/utils/common';
import SamstoSpecBoxComp from './components/SamstoSpecBoxComp.vue';
import { samstoSpecboxPagelist, samstoSpecboxDelete } from '@/views/lab_sys/samsto_set/apis/samsto_api';
let store = AppStore();

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 左侧表格:
let showLoading = ref(false); //刷新+表格加载
const form = reactive({ keyvalue: '' }); //根据关键字查询
const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const tableData = reactive([]); //表格数据
let storageList = reactive([]);//冰箱列表

const tableHard = reactive(["#", "A", "B", "C", "D", "E", "F", "G", "H", "I"]); //表格数据
const curSelectRow = ref({});
const pCurSelectRow = ref({});
const asknDicts = reactive([]);
const isPageDisabled = ref(true);
let tableHeight = ref(window.innerHeight - 235);
const drawer = ref(false)
// 右侧表单:
const samstoSpecboxFormRef = ref<InstanceType<typeof SamstoSpecboxForm>>(); //基本信息表单标记ref
const activeName = ref('infoForm');
const infoTabPaneDisabled = ref(true);
let SamstoSpecBoxCompRef = ref(null);
let dataForm = reactive({
  stoPidName:'',
  stoPid:'',
  stoName:'',
  stoId:'',
  fridge:'',
  layer:'',
  specbox:'',
});

let currentIndex = ref('');

//暴露属性和方法
defineExpose({
  getStorageList
})
async function getStorageList(op:any,dataForm1 :any) {
  dataForm.stoPidName=dataForm1.stoPidName;
  dataForm.stoPid=dataForm1.stoPid;
  dataForm.stoName=dataForm1.stoName;
  dataForm.stoId=dataForm1.stoId;
  storageList.length = 0;
  const url = '/api/samsto/samstoStorageFridge/getStorageFridgeList';
  proxy.$http
      .get(url,{ params: {storageId:op.id} })
      .then((res: any) => {
        storageList.push(...res.data);
        if (storageList.length>0){
          const data={
            fridge:'',
            layer:'',
            specbox:'',
            specboxData:null
          }
          data.fridge=storageList[0].itemName+'('+storageList[0].itemCode+')';
          if (storageList[0].fridgeLayerList && storageList[0].fridgeLayerList.length>0){
            data.layer='第'+storageList[0].fridgeLayerList[0].layerSeq+'层';
            if (storageList[0].fridgeLayerList[0].specboxList && storageList[0].fridgeLayerList[0].specboxList.length>0){
              data.specbox=storageList[0].fridgeLayerList[0].specboxList[0].specboxCode;
              data.specboxData=storageList[0].fridgeLayerList[0].specboxList[0];
            }
          }
        }
      })
      .catch((err) => {
        VxeMessage(err, VxeNotifyType.error);
      });
}

/**打开留样盒弹窗 */
function opensamsspecboxmodel(item,layer,specbox,index) {
  const data={
    stoPidName:'',
    stoPid:'',
    stoName:'',
    stoId:'',
    fridge:'',
    layer:'',
    specbox:'',
    specboxData:null,
    orderData:null
  }
  data.stoPidName=dataForm.stoPidName;
  data.stoPid=dataForm.stoPid;
  data.stoName=dataForm.stoName;
  data.stoId=dataForm.stoId;
  data.fridge=item.itemName+'('+item.itemCode+')';
  data.layer='第'+layer.layerSeq+'层';
  data.specbox=specbox.specboxCode;
  data.specboxData=specbox;  
  currentIndex.value = `${specbox.id}-${index}`;

  const url = '/api/samsto/specboxOrderReq/getSpecboxOrderReqList';
  proxy.$http
      .get(url,{ params: {id:specbox.id} })
      .then((res: any) => {
        if (res.status.code === 1) {
          data.orderData=res.data;
          proxy.$emit('clickCell', data);
          SamstoSpecBoxCompRef.value?.initPage(data);
        }
      })
      .catch((err) => {
        VxeMessage(err, VxeNotifyType.error);
      });
}
</script>
<style lang="scss" scoped>
#samstoSpecboxList {
  width: 100%;
  height: 100%;
  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);
    .hand-cursor {
      cursor: pointer; /* 鼠标指针在元素上时显示为手指形状 */
    }
    .area {
      width: 100%;
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }

      .el-tabs {
        border: none;
        height: 100%;
        :deep(.el-tabs__content) {
          padding: 0;
          height: calc(100% - 39px);
          .el-tab-pane {
            height: 100%;
          }
          #pane-0 {
            padding: 15px;
            height: calc(100% - 30px);
          }
        }
      }
    }
    .bankItemContent {
      min-height: 600px;
      border-radius: 10px;
    }

    .disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }

  .tableBox {
    height: calc(100% - 40px);

    .box-bottom {
      height: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  #boxHeader {
    border-color: #e0e0e0;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    background-color: #e0e0e0 !important;
    height: 110px !important;
    cursor: pointer;
  }
  .boxmain {
    border-color: #e0e0e0;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    .el-button {
      margin: 3px;
    }
  }
  #boxFooter {
    border-color: #e0e0e0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    background-color: #e0e0e0 !important;
    height: 38px !important;
    align-items: center;
    display: flex;
  }
  .el-aside {
    background-color: #ffffff !important;
    color: #22c3dc;
    font-weight: bolder;
    text-align: center;
  }
}

/* 定义电源指示灯的样式 */
.power-indicator {
  width: 16px;
  height: 16px;
  background-color: #006f04; /* 初始绿色 */
  border-radius: 50%; /* 圆形 */
  animation: blink 2s infinite; /* 每1秒闪烁一次，持续循环 */
  margin-top: 4px;
}

/* 定义闪烁的动画 */
@keyframes blink {
  0% {
    background-color: #006f04; /* 绿色 */
  }
  50% {
    background-color: #00e676; /* 更亮的绿色 */
  }
  100% {
    background-color: #006f04; /* 绿色 */
  }
}
:deep(.actived) {
  background-color: #66e4f5 !important;
}
</style>

